<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--订单信息-->
			<view class="detail-item">
				<uni-section title="订单信息" type="line"></uni-section>
				<view class="detail-content">
					<!-- <view class="detail-text">ID：<text>{{info.id}}</text></view> -->
					<view class="detail-text">
						订单编号：
						<text>{{info.orderNumber}}</text>
						<text class="detail-text-copy" @click="copyText(info.orderNumber)">复制</text>
					</view>
					<view class="detail-text">
						销售渠道：
						<uni-tag size="small" type="primary" :class="`sellChannel${info.sellChannel}`" :text="arrText(sellChannelList, info.sellChannel)" />
					</view>
					<view class="detail-text">销售人员：<text>{{info.salesmanName}}</text></view>
					<view class="detail-text">
						用户姓名：
						<text>{{info.customerName}}</text>
						<text class="detail-text-copy" @click="copyText(info.customerName)">复制</text>
					</view>
					<view class="detail-text">
						注册电话：
						<text>{{info.accountPhone}}</text>
						<text class="detail-text-copy" @click="copyText(info.accountPhone)">复制</text>
						<text class="detail-text-copy" @click="call(info.accountPhone)">拨打</text>
					</view>
					<view class="detail-text">客户店铺：<text>{{info.company}}</text></view>
					<view class="detail-text" v-if="checkPermi(['zhouyz:order:price'])">应付金额：<text>{{info.originalPrice}}</text></view>
					<view class="detail-text" v-if="checkPermi(['zhouyz:order:price'])">实付金额：<text>{{info.actualPrice}}</text></view>
					<view class="detail-text" v-if="checkPermi(['zhouyz:order:price'])">折扣金额：<text>{{info.discountPrice}}</text></view>
					<view class="detail-text" v-if="checkPermi(['zhouyz:order:price'])">退款金额：<text>{{info.refundPrice}}</text></view>
					<view class="detail-text">下单时间：<text>{{info.createTime}}</text></view>
					<view class="detail-text">付款时间：<text>{{info.payTime}}</text></view>
					<view class="detail-text">发货时间：<text>{{info.sendTime}}</text></view>
					<view class="detail-text">完成时间：<text>{{info.completeTime}}</text></view>
					<view class="detail-text">订单备注：<text class="red">{{info.remark}}</text></view>
					<view class="detail-text">
						区域：
						<uni-tag size="small" :text="arrText(setStore.allProvinceList, info.regionCode)" />
					</view>
					<view class="detail-text">
						行政区：
						<text>{{info.addr}}</text>
					</view>
					<view class="detail-text">配送仓库：<text>{{info.warehouseName}}</text></view>
					<view class="detail-text">订单状态：<uni-tag size="small":class="`order-status-${info.status}`" :text="arrText(allStatusList, info.status)" /></view>
				</view>
			</view>
			
			<!--订单签收-->
			<view class="detail-item">
				<uni-section title="订单签收" type="line"></uni-section>
				<view class="detail-content">
					<view class="detail-text">
						签收时间：
						<text>{{userInfo.signTime}}</text>
					</view>
					<view class="detail-text">
						签收人员：
						<text>{{userInfo.signTime}}</text>
					</view>
					<view class="main-flex detail-text detail-flex-start">
						签收凭证：
						<view class="detail-text_r" @click.stop="previewImg(info.signImage)">
							<up-image width="120rpx" height="120rpx" :src="info.signImage" :lazy-load="true"></up-image>
						</view>
					</view>
				</view>
			</view>
			
			<!--商品信息-->
			<view class="detail-item">
				<uni-section title="商品信息" type="line"></uni-section>
				<view class="detail-content table">
					<ty-table
						:data="tableList"
						:columns="columns"
						:sortable="true"
						:cellClassName="() => 'table-cell'"
						:headerCellClassName="() => 'table-cell'"
						stripe
						border>
					</ty-table>
				</view>
			</view>
			
			<!--折扣券-->
			<view class="detail-item" v-if="couponTableList.length > 0">
				<uni-section title="折扣券" type="line"></uni-section>
				<view class="detail-content table">
					<ty-table
						:data="couponTableList"
						:columns="couponColumns"
						:sortable="true"
						:cellClassName="() => 'table-cell'"
						:headerCellClassName="() => 'table-cell'"
						stripe
						border>
						<template v-slot:childType="{ row }">
							<view class="table-cell">
								{{arrText(couponSourceList, row.childType)}}
							</view>
						</template>
					</ty-table>
				</view>
			</view>
			
			
			<!--配送信息-->
			<view class="detail-item">
				<uni-section title="配送信息" type="line"></uni-section>
				<view class="detail-content">
					<view class="detail-text">联系人：<text>{{userInfo.contacts}}</text></view>
					<view class="detail-text">
						联系电话：
						<text>{{userInfo.phone}}</text>
						<text class="detail-text-copy" @click="copyText(userInfo.phone)">复制</text>
						<text class="detail-text-copy" @click="call(userInfo.phone)">拨打</text>
					</view>
					<view class="detail-text">收货地址：
						<text>{{info.addr}} {{info.addressDetail}}</text>
						<text class="detail-text-copy" @click="copyText(`${info.addr} ${info.addressDetail}`)">复制</text>
					</view>
				</view>
			</view>
			
			<!--售后（退款）-->
			<view class="detail-item" v-if="orderRefundTableList.length > 0">
				<uni-section title="售后（退款）" type="line"></uni-section>
				<view class="detail-content table">
					<ty-table
						:data="orderRefundTableList"
						:columns="orderRefundColumns"
						:sortable="true"
						:cellClassName="() => 'table-cell'"
						:headerCellClassName="() => 'table-cell'"
						stripe
						border>
						<template v-slot:before="{ row }">
							<view class="table-td-before table-cell">
								<view class="table-td-row">
									退款编号：
									<text class="table-td-text">{{row.number}}</text>
									<text class="detail-text-copy" @click="copyText(row.number)">复制</text>
									<text v-if="checkPermi(['zhouyz:orderRefund:list'])" class="detail-text-copy" @click="showPage(row)">查看</text>
								</view>
							</view>
						</template>
					</ty-table>
				</view>
			</view>
			
			<!--操作-->
			<view class="detail-btns main-flex" v-if="info.id">
				<view v-if="checkPermi(['zhouyz:orderRefund:add']) && info.status > 0" class="detail-btn main-flex">
					<up-button
						class="detail-btn-info"
						type="error"
						@click.stop="orderRefundAddFun">
						<!-- <uni-icons class="table-operate-btn-icon" type="trash" size="14" color="#ffffff"></uni-icons> -->
						<view class="table-operate-btn-text">申请退款</view>
					</up-button>
				</view>
			</view>
			
			
		</view>
		
		
		<!--确认弹窗-->
		<up-popup :z-index="90" round="5" closeable :show="showEdit" @close="editCancel" mode="center">
			<view class="edit">
				<view class="edit-header">申请退款</view>
				<view class="edit-form">
					<uni-forms
						ref="editRef"
						:modelValue="editModel"
						label-width="160rpx">
						<uni-forms-item label="退款说明" name="remark">
							<uni-easyinput type="textarea" v-model="editModel.remark" placeholder="请输入退款说明"></uni-easyinput>
						</uni-forms-item>
					</uni-forms>
					<view class="edit-footer main-flex">
						<up-button
							class="edit-footer-item"
							@click="editCancel"
							text="取消"></up-button>
						<up-button
							class="edit-footer-item"
							text="确认"
							type="primary"
							@click="editConfirm"></up-button>
					</view>
				</view>
			</view>
		</up-popup>
		
		
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { orderStatus } from "@/api/system/dict/data"
import { orderProductDetail, orderDetail, orderRefund, orderCouponDetail, orderRefundAdd } from "@/api/erp_api/order"
import { copyText, arrText } from '@/utils/ty.js';
import { sellChannelList, couponSourceList } from '@/utils/config.js'
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'

	const userStore = useUserStore()	
	const setStore = useSetStore()
	onLoad(async (option) => {
		if (option.id) {
			await getOrderStatus()
			id.value = option.id
			getDetail()
			getProductDetail()
		}
	})
	onShow(() => {
		if (id.value) {
			getDetail()
			getProductDetail()
		}
	})
	
	// 获取订单状态
	const allStatusList = ref([])
	const getOrderStatus = () => {
		return orderStatus().then(res => {
			allStatusList.value = res.data.map(item => {
				return {
					...item,
					value: item.dictValue,
					text: item.dictLabel
				}
			}) || []
		})
	}
	
	// 数据查询
	const id = ref('')
	const info = ref({})
	const userInfo = ref({})
	const tableList = ref([])
	const isLoading = ref(false)
	
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		orderDetail(params).then(res => {
			info.value = res.data || {}
			isLoading.value = false
			uni.hideLoading()
			if (checkPermi(['zhouyz:orderRefund:list'])) {
				getOrderRefundDetail()
			}
			getCouponDetail()
	  }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	// 表格头部
	const columns = ref(checkPermi(['zhouyz:order:price']) ? [
		{ title: '名称', key: 'productName' },
		{ title: '价格', key: 'price', width: '120rpx' },
		{ title: '数量', key: 'number', width: '120rpx' },
		{ title: '单位', key: 'productUnit', width: '100rpx' },
		{ title: '备注', key: 'remark' }
	] : [
		{ title: '名称', key: 'productName' },
		{ title: '数量', key: 'number', width: '120rpx' },
		{ title: '单位', key: 'productUnit', width: '100rpx' },
		{ title: '备注', key: 'remark' }
	])
	
	const getProductDetail = () => {
		const params = {
			id: id.value
		}
		orderProductDetail(params).then(res => {
			tableList.value = res.data || []
			userInfo.value = res.addr || {}
    })
	}
	
	// 优惠表格头部
	const couponColumns = ref([
		{ title: '券名', key: 'couponName' },
		{ title: '金额', key: 'discountMoney', width: '100rpx' },
		{ title: '券类型', key: 'type', width: '120rpx' },
		{ title: '券来源', key: 'childType', width: '120rpx' },
		{ title: '领取时间', key: 'receiveTime', width: '220rpx' }
	])
	const couponTableList = ref([])
	
	const getCouponDetail = () => {
		const params = {
			id: id.value
		}
		orderCouponDetail(params).then(res => {
			couponTableList.value = res.data || []
	  })
	}
	
	// 退款表格头部
	const orderRefundColumns = ref([
		{ title: '现退金额', key: 'refundCurrent' },
		{ title: '制单人', key: 'createUserName' },
		{ title: '日期', key: 'createTime' },
		{ title: '退款说明', key: 'remark' }
	])
	const orderRefundTableList = ref([])
	
	const getOrderRefundDetail = () => {
		const params = {
			orderId: id.value,
			pageNum: 1,
			pageSize: 100
		}
		orderRefund(params).then(res => {
			orderRefundTableList.value = res.rows || []
	  })
	}
	
	const showPage = (row) => {
		uni.navigateTo({
			url: `/pages/order/orderRefundDetail?id=${row.id}`
		})
	}
	
	// 拨打电话
	const call = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone
		})
	}
	
	
	// 修改
	const showEdit = ref(false)
	const editRef = ref(null)
	const isSubmit = ref(false)
	const editModel = ref({
		remark: ''
	})
	const editRules = ref({})
	
	
	//打开退款
	const orderRefundAddFun = () => {
		if (orderRefundTableList.value.length > 0) {
			uni.showModal({
				title: '提示',
				content: '该订单已有退款单，是否继续申请退款？',
				success: function (res) {
					if (res.confirm) {
						showEdit.value = true
					}
				}
			})
		} else {
			showEdit.value = true
		}
	}
	
	// 取消退款
	const editCancel = () => {
		showEdit.value = false
		isSubmit.value = false
		editModel.value = {
			remark: ''
		}
	}
	
	const editConfirm = () => {
		editRef.value.validate().then(formRes => {
			isSubmit.value = true
			orderRefundAdd({
				remark: formRes.remark
			}, info.value.id).then((res) => {
				if (res.id) {
					editCancel()
					uni.navigateTo({
						url: `/pages/order/orderRefundAdd?id=${res.id}`
					})
				} else {
					modal.showToast(res.msg)
				}
			}).catch(err => {
				modal.showToast(err)
				isSubmit.value = false
			})
		})
	}
	
	
</script>

<style scoped>
</style>
